<!--页面组件-->
<template>
  <div>
    <div class="tempxyz tableHeight">
      <CCard>
        <CCardHeader>
          <!-- class=strongstyle -->
          <strong class="title">任务列表</strong>
        </CCardHeader>
        <CCardBody class="card-body">
          <div class="cardstyle">
            <div class="rowstyle" @keyup.enter="search()">
              <div class="threePart" style="margin-bottom: 10px">
                <div class="myColtemp layout" style>
                  <p class="labelName" style="width: 60px">任务名称</p>
                  <Input
                    :title="groupName"
                    v-model="groupName"
                    placeholder="请输入任务名称搜索..."
                    class="pickstyle"
                    maxlength="50"
                    @keyup.enter="hello"
                    id="inputenter"
                  />
                </div>
                <div class="myColtemp layout" style>
                  <p class="labelName" style="width: 60px">数据名称</p>
                  <Input
                    :title="dataName"
                    v-model="dataName"
                    placeholder="请输入数据名称搜索..."
                    class="pickstyle"
                    maxlength="50"
                    @keyup.enter="hello"
                    id="inputenter"
                  />
                </div>
                <div class="startStutes layout">
                  <label class="labelName">开始日期</label>
                  <DatePicker
                    type="date"
                    placeholder="请选择开始日期"
                    v-model="startTime"
                    class="pickstyle"
                    @on-change="onStartTimeChange"
                    :options="startTimeOption"
                    :editable="false"
                  ></DatePicker>
                </div>
                <div class="endDateBtn layout">
                  <label class="labelName" style="width: 60px">结束日期</label>
                  <DatePicker
                    type="date"
                    placeholder="请选择结束日期"
                    v-model="endDate"
                    class="pickstyle"
                    @on-change="onEndTimeChange"
                    :options="endTimeOption"
                    :editable="false"
                  ></DatePicker>
                </div>
              </div>
              <div class="secondPart" style="margin-top: 10px">
                <div class="myColtemp layout" style>
                  <p class="labelName" style="width: 60px">数据来源</p>
                  <Input
                    :title="taskSource"
                    v-model="taskSource"
                    placeholder="0-手动/1-应急/2-目录/3-定时/4-其他..."
                    class="pickstyle"
                    maxlength="50"
                    @keyup.enter="hello"
                    id="inputenter"
                  />
                </div>
                <div class="myColtemp layout">
                  <label style="margin-right: 41px; display: inline-block"
                    >优先级</label
                  >
                  <RadioGroup v-model="priority" class="m_radio_group">
                    <Radio label>全部</Radio>
                    <Radio label="0">普通</Radio>
                    <Radio label="1">优先</Radio>
                  </RadioGroup>
                </div>

                <div class="myColtemp" style="width: 47%">
                  <label
                    class="myColPri"
                    style="margin-right: 25px; display: inline-block"
                    >任务状态</label
                  >
                  <RadioGroup
                    v-model="taskStatus"
                    class="m_radio_group"
                    label="任务状态"
                  >
                    <Radio label>全部</Radio>
                    <Radio label="1">执行中</Radio>
                    <Radio label="8">待执行</Radio>
                    <Radio label="4">成功</Radio>
                    <Radio label="5">失败</Radio>
                    <Radio label="10">部分失败</Radio>
               <!--     <Radio label="2">暂停</Radio>-->
                    <!-- <Radio label="7">停止</Radio> -->
                  </RadioGroup>
                </div>
                <div class="searchRight">
                  <CButton
                    color="info"
                    @click="search()"
                    class="myCol1 listbtn system-btn-style"
                  >
                    <CIcon name="cil-magnifying-glass" />&nbsp;搜索
                  </CButton>
                  <CButton color="info" @click="clearmess" class="myCol1 clean system-btn-style">
                    <img
                      src="@/assets/icons/chongzhi.png"
                      style="width: 15px; height: 15px"
                      alt
                    />&nbsp; 重置
                  </CButton>
                </div>
              </div>
            </div>
          </div>
          <div style="height: calc(100% - 160px)">
            <TaskTable
              ref="refTaskTable"
              style="height: 100%"
            ></TaskTable>
          </div>
        </CCardBody>
       <!-- <CCardFooter class="page-link">
          <CRow>
            <CCol class="footerPage" style>
              <span class="pageContent">
                每页
                <CSelect
                  @change="getVendorId($event)"
                  :options="[10, 15, 20, 25]"
                  v-model="pageSize"
                  class="selectStyle"
                  style
                />
                条记录。第{{ this.currentPage }}页(总共{{ this.total }}页，{{
                  this.allNum
                }}条记录)
              </span>
              <CPagination
                :activePage.sync="currentPage"
                :pages="total"
                align="end"
                v-if="total != 0"
              />
            </CCol>
          </CRow>
        </CCardFooter>-->
      </CCard>
    </div>
    <!-- 质检报告 -->
    <!--    <div>
      <QualityReport
        ref="refQcReportModal"
        v-show="qcReportModal"
        :modalShow="qcReportModal"
        @closed="qcReportModalClosed"
      ></QualityReport>
    </div>-->
  </div>
</template>
<script>
import TaskTable from "./taskTable";
import QualityReport from "../qualityCheck/qualityReport";
const fields = [
  {
    label: "序号",
    key: "number",
    _style: "width:60px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "任务名称",
    key: "groupTaskName",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "任务来源",
    key: "taskSourceName",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "用户名",
    key: "show_userName",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "开始时间",
    key: "createTime",
    _style: "width:170px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "结束时间",
    key: "endTime",
    _style: "width:170px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "优先级",
    key: "show_details1",
    _style: "width:75px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "景数(成功/失败)",
    key: "show_imageNumber",
    _style: "width:120px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "状态",
    key: "show_details2",
    _style: "width:90px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "操作",
    key: "show_details",
    _style: "width:360px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
];
export default {
  name: "allTask",
  components: {QualityReport, TaskTable,},
  data() {
    return {
      modalStyle: { top: "340px" },
      qcReportModal: false,
      fields,
      showPop: false,
      pauseShow: false,
      restoreShow: false,
      restartShow: false,
      retryShow: false,
      stopShow: false,
      delShow: false,

      taskSource:"",//数据来源
      dataName:"",//数据名称

      clickId: "",
      loading: true,
      currentPage: 1,//当前页数
      pages: 0,
      total: 0,
      allNum: 0,
      pageSize: 15,
      priority: "",
      taskStatus: "",
      gettaskStatus: "",
      searchName: "",
      groupName: "",
      changestatus: false,
      data: [],
      startTime: "",
      endDate: "",
      startTimeOption: {},
      endTimeOption: {},

      prioShow: false, // 修改优先级弹窗
      priorityData: {
        priority: "0",
        startWorkflowId: "",
      },
      productpath: "",
      showdownLoad: false,
      treeData: [],



    };
  },
  computed: {
    getColumnlist() {
      return [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          key: "productName",
          title: "质检报告文件(文件夹)",
          render: (h, params) => {
            return h("div", [
              h(
                      "span",
                      {
                        style: {},
                        //就是这里加的属性
                        domProps: {
                          title: params.row.productName,
                        },
                      },
                      params.row.productName
              ),
            ]);
          },
        },
        {
          title: "操作",
          width: "150px",
          slot: "action",
          align: "center",
        },
      ];
    },
  },
  mounted() {
    // 查询子任务页面返回调用
    // if (this.$route.query.from === "taskChildren") {
    //     this.currentPage = parseInt(this.$route.query.pageNum);
    // }
    if (this.$route.query.from === "adminHome") {
      // 调用父组件的方法
      this.$parent.$parent.headershowTask();
    }
    this.$refs.refTaskTable.initParam(this.getSearchParam());
    this.$refs.refTaskTable.getTaskTableData();
    this.onStartTimeChange(this.startTime);
    this.onEndTimeChange(this.endTime);
  },
  methods: {

    pageChange(data) {
      this.total = data.total;
      this.allNum = data.allNum;
    },
    getSearchParam() {
      let data = {};
      data.pageNum = this.currentPage;
      data.pageSize = this.pageSize;
      data.status = this.taskStatus;
      data.priority = this.priority;
      data.startTime = this.startTime;
      data.endTime = this.endDate;
      data.name = this.groupName;
      data.dataName = this.dataName;//数据名称
      data.taskSource = this.taskSource;//数据来源
      data.tag = "";
      return data;
    },

    search() {
      this.gettaskStatus = this.taskStatus;
      this.$refs.refTaskTable.initParam(this.getSearchParam());
      this.$refs.refTaskTable.getTaskTableData();
    },
    qcReportModalClosed() {
      this.qcReportModal = false;
    },

    // 树选择名称，传递名称
    // 复选
    // selectTree(arr,obj) {
    //   let datalength = arr.length
    //   let newarr = [];
    //   for (let i = 0; i < datalength; i++) {
    //     if(arr[i].path != null){
    //       let temp = arr[i].path;
    //       newarr.push(temp);
    //     }

    //   }
    //   this.productpath = newarr.toString();
    //   this.productpath = this.$refs.tree.getSelectedNodes()[0].path;
    // },

    getVendorId(event) {
      let tempdata = event.target.value; //获取option对应的value值
      this.pageSize = parseInt(tempdata);
    },
    clearmess() {
      this.groupName = "";
      this.startTime = "";
      this.endDate = "";
      this.priority = "";
      this.taskStatus = "";
      this.currentPage = 1;
      this.taskSource = "";
      this.dataName = "";
      this.$refs.refTaskTable.initParam(this.getSearchParam());
      this.$refs.refTaskTable.getTaskTableData();
    },
    // 输入框判断 start
    onStartTimeChange(startTime, type) {
      this.endTimeOption = {
        disabledDate(endTime) {
          return (
            endTime < new Date(startTime) - 8 * 60 * 60 * 1000 ||
            endTime > Date.now()
          );
        },
      };
    },
    onEndTimeChange(endTime, type) {
      this.startTimeOption = {
        disabledDate(startTime) {
          return startTime >= new Date(endTime) || startTime >= Date.now();
        },
      };
    },
    // end
    hello() {
      this.$Message.error("hello");
    },
  },
  watch: {
    data(newVal, oldVal) {
      this.$nextTick(function () {
        this.GlobalPermissionRender.render();
      });
    },
    groupName(newVal, oldVal) {
      if (newVal.length >= 50) {
        this.$Message.warning("任务名称长度不得超过50个字符");
      } else {
      }
    },
    // pageSize(newVal, oldVal) {
    //   this.pageSize = newVal;
    //    this.$refs.refTaskTable.pageSizeChange(newVal);
    // },
    // currentPage(newVal, oldVal) {
    //   this.currentPage = newVal;
    //    this.$refs.refTaskTable.currentPageChange(newVal);
    // },
    startTime(newVal, oldVal) {
      this.startTime = this.$moment(newVal).format("YYYY-MM-DD");
    },
    endDate(newVal, oldVal) {
      this.endDate = this.$moment(newVal).format("YYYY-MM-DD");
    },
  },
};

$("#inputenter").keydown(function (e) {
  if (e.keyCode == 13) {
    this.hello();
  }
});
</script>



<style scoped>
.myCol {
  margin-left: 10px;
  display: flex;
  align-items: center;
}
.myColPri {
  margin-right: 10px;
}
.myCol1 {
  margin-left: 0px;
}
.myColtemp {
  display: flex;
  align-items: center;
  margin-left: 5px;
  width: 33.3%;
}
.search {
  display: flex;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.76563rem;
  line-height: 1.5;
  border-radius: 0.2rem;
  width: 50px;
}

.labelName {
  margin-right: 25px;
  margin-bottom: 0px;
}
.m_radio_group {
  height: 21px;
  margin-top: -9px;
}
.m_radio_group label {
  margin: 0;
  margin-right: 14px;
}
.btnStyle {
  padding: 0;
  margin: 0 3px;
}
.btnStyle:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
.strongstyle {
  font-size: 18px;
}

.pickstyle {
  width: 58%;
}

.clean {
  margin-left: 10px;
  margin-right: 18px;
}
.listbtn {
  margin-left: 0px;
}
.deletestyle {
  width: 15px;
  height: 15px;
}
.page-link {
  cursor: pointer;
}
.pageContent {
  margin-right: 26px;
  font-size: 14px;
}
.selectStyle {
  display: inline-block;
  width: 100px;
  margin-right: 5px;
}
.footerPage {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  color: black;
}
.modal-header {
  display: flex;
  justify-content: flex-start;
}
.threePart,
.secondPart {
  display: flex;
  justify-content: space-between;
}
.layout {
  width: 33.3%;
}
.searchRight {
  width: 18%;
}
.searchRight > .btnstyle1 {
  position: absolute;
  right: 2%;
}
/* 用以调整表格位置 */
.tablePosition {
  overflow-y: auto;
  height: calc(100% - 158px);
}
.rowstyle {
  margin-bottom: 0;
}

.tempxyz /deep/.card-footer {
  bottom: 12px;
}

/deep/.page-item.active .page-link {
  background-color:  var(--label-font-color,  #5d8bc4)
}
</style>
<style>
.cardstyle {
  margin: 10px 0;
}
.tempxyz .card-body {
  overflow-y: auto;
  padding: 0 20px;
  bottom: 0;
  /* height: calc(100% - 52px) !important; */
}

.tablePosition > div {
  height: 100% !important;
  width: 100% !important;
  border: 1px solid #d8dbe0;
  border-left: 0;
  border-right: 0;
}

.table {
  margin-bottom: 0;
}

.table th {
  border-top: 0;
}
.onButton:hover {
  color: white;
}
</style>
